'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

var _Icon = require('./Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _GradientEdit = require('./GradientEdit');

var _GradientEdit2 = _interopRequireDefault(_GradientEdit);

var _RowHelp = require('./RowHelp');

var _RowHelp2 = _interopRequireDefault(_RowHelp);

var _SelectInput = require('./SelectInput');

var _SelectInput2 = _interopRequireDefault(_SelectInput);

var _utils = require('../../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var RadioGroup = _radio2['default'].Group;
var RadioButton = _radio2['default'].Button;

var BackGroundPop = function (_React$Component) {
    (0, _inherits3['default'])(BackGroundPop, _React$Component);

    function BackGroundPop() {
        var _ref;

        var _temp, _this, _ret;

        (0, _classCallCheck3['default'])(this, BackGroundPop);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = BackGroundPop.__proto__ || Object.getPrototypeOf(BackGroundPop)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (k, v, isDrag) {
            var _this$props = _this.props,
                value = _this$props.value,
                num = _this$props.num;

            Object.keys(value).forEach(function (key) {
                if (key === k) {
                    value[key][num] = v;
                }
                ;
            });
            _this.props.onChange(value, isDrag);
        }, _this.getType = function () {
            var _this$props2 = _this.props,
                num = _this$props2.num,
                value = _this$props2.value;

            var url = value.image[num];
            return (0, _utils.getBgImageType)(url);
        }, _this.getTypeToRender = function (type) {
            var _this$props3 = _this.props,
                locale = _this$props3.locale,
                className = _this$props3.className;

            return _react2['default'].createElement(
                _row2['default'],
                { gutter: 8, className: className + '-type' },
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 3 },
                    _react2['default'].createElement(_Icon2['default'], { type: 'bg-type', prompt: locale.type })
                ),
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 21 },
                    _react2['default'].createElement(
                        RadioGroup,
                        {
                            value: type,
                            size: 'small',
                            onChange: function onChange(e) {
                                var v = e.target.value;
                                _this.onChange('image', _utils.defaultBgImageOrGradient[v]);
                            }
                        },
                        ['img', 'linear', 'radial'].map(function (key) {
                            return _react2['default'].createElement(
                                RadioButton,
                                { value: key, key: key },
                                _react2['default'].createElement(
                                    'div',
                                    { style: {
                                            height: 24,
                                            overflow: 'hidden'
                                        } },
                                    _react2['default'].createElement(_Icon2['default'], { type: key === 'img' ? 'picture' : 'bg-type-' + key, prompt: locale[key],
                                        destroyTooltipOnHide: true })
                                )
                            );
                        })
                    )
                )
            );
        }, _this.getCommon = function () {
            var _this$props4 = _this.props,
                locale = _this$props4.locale,
                value = _this$props4.value,
                num = _this$props4.num;

            return [_react2['default'].createElement(
                _RowHelp2['default'],
                {
                    title: _react2['default'].createElement(_Icon2['default'], { type: 'filter', prompt: locale.blendMode }),
                    help: locale.blendModeHelp,
                    key: 'filter'
                },
                _react2['default'].createElement(
                    _select2['default'],
                    {
                        style: { width: '100%' },
                        value: value.blendMode[num],
                        size: 'small',
                        onChange: function onChange(e) {
                            _this.onChange('blendMode', e);
                        },
                        getPopupContainer: function getPopupContainer(node) {
                            return (0, _utils.getParentNode)(node, 'editor-list');
                        },
                        dropdownMatchSelectWidth: false,
                        dropdownClassName: 'editor-list-dropdown'
                    },
                    (0, _utils.getOptionArray)(_this.blendMode)
                )
            ), _react2['default'].createElement(
                _RowHelp2['default'],
                {
                    title: _react2['default'].createElement(_Icon2['default'], { type: 'clip', prompt: locale.clip }),
                    help: locale.clipHelp,
                    key: 'clip'
                },
                _react2['default'].createElement(
                    _select2['default'],
                    {
                        style: { width: '100%' },
                        value: value.clip[num],
                        size: 'small',
                        onChange: function onChange(e) {
                            _this.onChange('clip', e);
                        },
                        getPopupContainer: function getPopupContainer(node) {
                            return (0, _utils.getParentNode)(node, 'editor-list');
                        },
                        dropdownMatchSelectWidth: false,
                        dropdownClassName: 'editor-list-dropdown'
                    },
                    (0, _utils.getOption)(locale.clipSelect)
                )
            ), _react2['default'].createElement(
                _row2['default'],
                { gutter: 8, key: 'attachment' },
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 3 },
                    _react2['default'].createElement(_Icon2['default'], { type: 'attachment', prompt: locale.attachment })
                ),
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 21 },
                    _react2['default'].createElement(
                        RadioGroup,
                        {
                            value: value.attachment[num],
                            size: 'small',
                            onChange: function onChange(e) {
                                var v = e.target.value;
                                _this.onChange('attachment', v);
                            }
                        },
                        (0, _utils.getRadioButton)(_this.attachment)
                    )
                )
            )];
        }, _this.getGradientChild = function (type) {
            var _this$props5 = _this.props,
                className = _this$props5.className,
                props = (0, _objectWithoutProperties3['default'])(_this$props5, ['className']);

            return _react2['default'].createElement(
                'div',
                null,
                _react2['default'].createElement(_GradientEdit2['default'], (0, _extends3['default'])({}, props, { type: type })),
                _this.getCommon()
            );
        }, _this.getImageChild = function () {
            var _this$props6 = _this.props,
                locale = _this$props6.locale,
                value = _this$props6.value,
                num = _this$props6.num,
                imageSelect = _this$props6.imageSelect,
                onImageSelectClick = _this$props6.onImageSelectClick;


            return _react2['default'].createElement(
                'div',
                null,
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'picture', prompt: locale.image })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(_input2['default'], {
                            value: (0, _utils.getBgImageUrl)(value.image[num]),
                            onChange: function onChange(e) {
                                var v = e.target.value;
                                _this.onChange('image', 'url(' + v + ')');
                            },
                            size: 'small',
                            placeholder: '\u6DFB\u52A0\u56FE\u7247'
                        }),
                        imageSelect && _react2['default'].createElement(
                            'a',
                            {
                                onClick: function onClick() {
                                    onImageSelectClick({
                                        onSuccess: function onSuccess(img) {
                                            _this.onChange('image', 'url(' + img + ')');
                                        }
                                    });
                                }
                            },
                            '\u9009\u62E9\u56FE\u7247'
                        )
                    )
                ),
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'repeat', prompt: locale.repeat })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(
                            _select2['default'],
                            {
                                style: { width: '100%' },
                                value: value.repeat[num],
                                size: 'small',
                                onChange: function onChange(e) {
                                    _this.onChange('repeat', e);
                                },
                                getPopupContainer: function getPopupContainer(node) {
                                    return (0, _utils.getParentNode)(node, 'editor-list');
                                },
                                dropdownMatchSelectWidth: false,
                                dropdownClassName: 'editor-list-dropdown'
                            },
                            (0, _utils.getOption)(locale.repeatSelect)
                        )
                    )
                ),
                _react2['default'].createElement(
                    _RowHelp2['default'],
                    {
                        title: _react2['default'].createElement(_Icon2['default'], { type: 'imagePosition', prompt: locale.position }),
                        help: locale.position_help
                    },
                    _react2['default'].createElement(
                        _SelectInput2['default'],
                        {
                            style: { width: '100%' },
                            value: value.position[num] || '',
                            size: 'small',
                            onChange: function onChange(e) {
                                _this.onChange('position', e);
                            }
                        },
                        (0, _utils.getOptionArray)(_this.position)
                    )
                ),
                _react2['default'].createElement(
                    _RowHelp2['default'],
                    {
                        title: _react2['default'].createElement(_Icon2['default'], { type: 'size', prompt: locale.size }),
                        help: locale.size_help
                    },
                    _react2['default'].createElement(
                        _SelectInput2['default'],
                        {
                            style: { width: '100%' },
                            value: value.size[num] || '',
                            size: 'small',
                            onChange: function onChange(e) {
                                _this.onChange('size', e);
                            }
                        },
                        (0, _utils.getOptionArray)(_this.size)
                    )
                ),
                _this.getCommon()
            );
        }, _this.getChildToRender = function (type) {
            switch (type) {
                case 'img':
                    return _this.getImageChild();
                case 'linear':
                case 'radial':
                    return _this.getGradientChild(type);
                default:
                    return null;
            }
        }, _this.position = ['center', 'center left', 'center right', 'top', 'top left', 'top right', 'bottom', 'bottom left', 'bottom right'], _this.size = ['100%', '100% 50%', 'auto', 'contain', 'cover'], _this.attachment = ['scroll', 'local', 'fixed'], _this.blendMode = ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'], _this.clip = ['border-box', 'padding-box', 'content-box'], _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
    }

    (0, _createClass3['default'])(BackGroundPop, [{
        key: 'render',
        value: function render() {
            var className = this.props.className;

            var type = this.getType();
            var typeToRender = this.getTypeToRender(type);
            var childToRender = this.getChildToRender(type);
            return _react2['default'].createElement(
                'div',
                { className: className },
                typeToRender,
                childToRender
            );
        }
    }]);
    return BackGroundPop;
}(_react2['default'].Component);

BackGroundPop.propTypes = {
    className: _propTypes2['default'].string,
    locale: _propTypes2['default'].object,
    value: _propTypes2['default'].any,
    onChange: _propTypes2['default'].func,
    num: _propTypes2['default'].number,
    type: _propTypes2['default'].string,
    imageSelect: _propTypes2['default'].bool,
    onImageSelectClick: _propTypes2['default'].func
};
BackGroundPop.defaultProps = {
    className: 'editor-bg-image-pop',
    imageSelect: false,
    onImageSelectClick: function onImageSelectClick() {}
};
exports['default'] = BackGroundPop;
module.exports = exports['default'];